
<script>
    function addListenerHomeItemLabelAnimationStart(){
        is_init = true
        control_prev = $('.home-item-label').first()
        control_prev_id = control_prev.attr('data-item-id')

        $(document).on('mouseenter', '.home-item-label', function () {

            // 记录现在的 homeItemLabel并得到其 itemID
            var control = $(this)
            var control_id = control.attr('data-item-id')

            // 针对第一次就移动到第一条 homeItemLabel的情况
            if (is_init && control_id == control_prev_id) {
                pannel = control.children('.control-pannel').first()
                pannel.addClass('animate__fadeIn')
                pannel.css('display', '')

                is_init = false
                return
            }

            // 如果两次移动到的是同一个 homeItemLabel
            if (control_prev_id == control_id) {
                return;
            }

            // 获取两个 homeItemLabel的子元素 controlPannel
            pannel = control.children('.control-pannel').first()
            pannel_prev = control_prev.children('.control-pannel').first()

            // 移到新的 homeItemLabel后立即隐藏旧的 homeItemLabel
            pannel_prev.css('display', 'none')
            
            
            setTimeout(()=>{pannel.css('display', '')},100)
            pannel.children().unbind()
            // 新的 homeItemLabel变为旧的 homeItemLabel, 等待下一次监听触发
            control_prev = control
            control_prev_id = control_prev.attr('data-item-id')


        })


        $(document).on('mouseleave', '.home-item-label', function (){
            $(this).children('.control-pannel').first().css('display', 'none')
        })
    }

    function addListenerBindControlPannels(){
        $.each($('.home-item-label'), (index, label) => {
            var label = $(label)
            var itemIDStr = label.attr('data-item-id')
            console.log(itemIDStr)
            pannel = label.children('.control-pannel').first()

            pannel.children('.pannel-edit').attr('onclick', `loadItemEditModal(${itemIDStr})`)
            pannel.children('.pannel-offShelf').attr('onclick', `loadOffShelfAlertModal(${itemIDStr})`)   
            pannel.children('.pannel-onShelf').attr('onclick', `submitItemStatusChange(${itemIDStr}, true, false)`)
            pannel.children('.pannel-delete').attr('onclick', `loadDeleteAlertModal(${itemIDStr})`)
        });
    }

    function addListenerLoadUserEditModal(){
        $("#showUserEditModal").click(()=>{
            loadUserEditModal()
        })
    }
</script>